<template>
  <div>
    <my-header></my-header>
    <swiper
      class="swiper"
      ref="mySwiper"
      @mouseover.native="stopSwiper"
      @mouseout.native="startSwiper"
      :options="swiperOption"
    >
      <swiper-slide class="a1">
        <img src="/zooplay_img/042b2806811a186c7e0825b23bf57327.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/2f24b7b17b1ed1eacb7c485beb0b878b.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/48cc7d9aef57dd2f6a5880ee2519084c.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/5eb3ae1cecd38ce317c4ed930fce20d5.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/9d06c2a56156ea7c1aa15d9174f92787.jpg" alt="" />
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <div
        class="swiper-pagination pagination pagination-1"
        slot="pagination"
        style="bottom: 10%"
      >
        <span class="swiper-pagination-switch"></span
        ><span class="swiper-pagination-switch"></span
        ><span class="swiper-pagination-switch"></span
        ><span
          class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"
        ></span
        ><span class="swiper-pagination-switch"></span>
      </div>

      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="container_1">
      <div class="cont">
        <img src="../../public/zooplay_img/bor1.png" alt="" />
      </div>
      <div class="main">
        <div class="main_div1">
          <div class="a1" href="">
            <img src="/zooplay_img/alls.png" alt="" />全部
          </div>
          <div @click="onmouseover2" class="a2" href="">
            <img
              @mouseover="onmouseover2"
              @mouseout="onmouseout2"
              src="/zooplay_img/567b1eb7b68e4c39538af036170ebe1a.png"
              alt=""
            />灵长类
          </div>
          <div @click="onmouseover33" class="a3" href="">
            <img
              @mouseover="onmouseover3"
              @mouseout="onmouseout3"
              src="/zooplay_img/8cd0a44e4a1df3c080a2b7e99ac64533.png"
              alt=""
            />爬行动物
          </div>
          <div
            @mouseover="onmouseover4"
            @mouseout="onmouseout4"
            class="a4"
            href=""
          >
            <img
              src="/zooplay_img/3761563547ac2a78d93d5962f1f6d6e6.png"
              alt=""
            />鸟类
          </div>
          <div
            @mouseover="onmouseover5"
            @mouseout="onmouseout5"
            class="a5"
            href=""
          >
            <img
              src="/zooplay_img/d73778b48649610bb5b6d0082014abce.png"
            />哺乳动物
          </div>
        </div>
        <div class="main_div2">
          <input type="text" />
          <img src="/zooplay_img/ii3.png" alt="" />
        </div>
      </div>
      <div class="buche">
        <div class="buche1">
          <div class="buche_left">
            <img src="../../public/zooplay_img/i3.png" alt="" />
            步行区
          </div>
          <div class="buche_right">
            <img src="../../public/zooplay_img/i4.png" alt="" />
            车行区
          </div>
        </div>
      </div>
      <div class="fenlei1" v-if="data">
        <div
          class="fenlei_1"
          v-for="{Title, Location, Content, ImageUrl, ZooId} in data"
          :key="ZooId"
        >
          <div class="shang">
            <img :src="`http://localhost:8080/${ImageUrl}`" />
          </div>
          <div class="xia">
            <p class="p1">
              {{ Title }}
              <img @click="click" src="/爱心.svg" alt="" />
            </p>
            <p class="p2">
              {{ Content }}
            </p>
            <p class="p3">{{ Location }}</p>
          </div>
        </div>
      </div>
      <div class="buche">
        <div class="buche1">
          <div class="buche_left1">
            <img src="../../public/zooplay_img/i3.png" alt="" />
            步行区
          </div>
          <div class="buche_right1" id="a">
            <img src="../../public/zooplay_img/i4.png" alt="" />
            车行区
          </div>
        </div>
      </div>
      <div class="fenlei2" v-if="datas">
        <div
          class="fenlei_2"
          v-for="{Title, Location, Content, ImageUrl, ZooId} in datas"
          :key="ZooId"
        >
          <div class="shang1">
            <img :src="`http://localhost:8080/${ImageUrl}`" />
          </div>
          <div class="xia1">
            <p class="p1">
              {{ Title }} <img @click="click" src="/爱心.svg" alt="" />
            </p>
            <p class="p2">
              {{ Content }}
            </p>
            <p class="p3">{{ Location }}</p>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import MyFooter from "@/components/MyFooter.vue";
  import MyHeader from "@/components/MyHeader.vue";
  export default {
    components: {MyFooter, MyHeader},
    mounted() {
      this.getData();
      this.getDatas();
    },
    data() {
      return {
        now: 0,
        data: null,
        datas: null,
        swiperOption: {
          effect: "slide",
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      };
    },

    methods: {
      onmouseover5() {
        var a5 = document.querySelector(".a5 img");
        a5.src = "/zooplay_img/3359a2108c56ceb280f1a4f68de0695f.png";
      },
      onmouseout5() {
        var a5 = document.querySelector(".a5 img");
        a5.src = "/zooplay_img/d73778b48649610bb5b6d0082014abce.png";
      },
      onmouseover4() {
        var a4 = document.querySelector(".a4 img");
        a4.src = "/zooplay_img/aff04e3b80c21731b89dcfdfb90fb130.png";
      },
      onmouseout4() {
        var a4 = document.querySelector(".a4 img");
        a4.src = "/zooplay_img/3761563547ac2a78d93d5962f1f6d6e6.png";
      },
      onmouseover3() {
        var a3 = document.querySelector(".a3 img");
        a3.src = "/zooplay_img/a5f335c0975e5eabcb27f9f20a7d0867.png";
      },
      onmouseover33() {
        var a3 = document.querySelector(".a3 img");
        a3.src = "/zooplay_img/a5f335c0975e5eabcb27f9f20a7d0867.png";
      },
      onmouseout3() {
        var a3 = document.querySelector(".a3 img");
        a3.src = "/zooplay_img/8cd0a44e4a1df3c080a2b7e99ac64533.png";
      },
      onmouseover2() {
        var a2 = document.querySelector(".a2 img");
        a2.src = "/zooplay_img/d8885978b2f9fb34802fd8ce7a8ad875.png";
      },
      onmouseout2() {
        var a2 = document.querySelector(".a2 img");
        a2.src = "/zooplay_img/567b1eb7b68e4c39538af036170ebe1a.png";
      },
      click() {},
      getDatas() {
        this.axios.get("http://127.0.0.1:3000/pro/Carshop").then(res => {
          console.log(res);
          this.datas = res.data.result;
        });
      },
      getData() {
        this.axios.get("walk").then(res => {
          console.log(res);
          this.data = res.data.result;
        });
      },
      stopSwiper() {
        this.$refs.mySwiper.$swiper.autoplay.stop();
      },
      startSwiper() {
        this.$refs.mySwiper.$swiper.autoplay.start();
      },
    },
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  .container_1 {
    position: relative;
    top: -15px;
    /* height: 2000px; */
    margin: 0;
    padding: 0;
    background-image: url("../../public/zooplay_img/wen1.jpg");
  }
  .fenlei1,
  .fenlei2 {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  .fenlei_1:hover,
  .fenlei_2:hover {
    transform: translateY(-8px);
    box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
  }
  .xia:hover .p1 {
    color: #ae7c52;
  }
  .xia1:hover .xia1 > .p1 {
    color: #ae7c52;
  }
  .p1 {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
  }
  .p1 img {
    z-index: 2;
    width: 20px;
    height: 20px;
  }
  .p2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .fenlei_1,
  .fenlei_2 {
    transition: all 0.3s linear;
    display: flex;
    margin: 10px 15px;
    flex-direction: column;
  }

  .shang,
  .shang {
    border-radius: 15px 15px 0 0;
    width: 350px;
    height: 240px;
  }

  .xia p,
  .xia1 p {
    text-align: left;
    padding: 0 10px;
    margin: 10px 0;
  }
  .xia,
  .xia1 {
    background-color: #fff;
    padding: 0 10px;
    width: 350px;
    height: 140px;
    border-radius: 0 0 15px 15px;
  }
  .shang img,
  .shang1 img {
    border-radius: 20px 20px 0 0;
    width: 370px;
    height: 240px;
  }
  .cont {
    position: absolute;
    width: 1200px;
    height: 30px;
    top: -70px;
    z-index: 65;
  }
  .buche {
    width: 1200px;
    margin: 0 auto;
  }
  .buche1 {
    margin-top: 50px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
  .buche_left1 img,
  .buche_left img {
    position: absolute;
    width: 100px;
    height: 90px;
    left: 10px;
    bottom: -10px;
  }
  .buche_right1 img,
  .buche_right img {
    position: absolute;
    width: 118px;
    height: 132px;
    left: 10px;
    bottom: -10px;
  }
  .buche_left,
  .buche_right1 {
    position: relative;
    color: white;
    font-size: 22px;
    width: 352px;
    text-align: center;
    border-radius: 29px;
    z-index: 66;
    line-height: 58px;
    background-color: #2c4e1c;
  }
  .buche_left {
    margin-right: 40px;
  }
  .buche_right1 {
    margin-left: 40px;
  }
  .buche_right,
  .buche_left1 {
    position: relative;
    z-index: 66;
    text-align: center;
    color: black;
    border-radius: 29px;
    font-size: 22px;
    width: 352px;
    background-color: #fff;
    line-height: 58px;
  }
  .main {
    position: relative;
    top: -50px;
    margin: 0 auto;
    display: flex;
    width: 1200px;
    z-index: 66;
    border-radius: 15px;
    background-image: url("/public/zooplay_img/buyBg.jpg");
    justify-content: space-between;
  }
  .main_div1 {
    display: flex;
  }
  .main_div1 div {
    padding: 10px;
    margin: 0 10px;
    text-decoration: transparent;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 117px;
    height: 77px;
  }
  .main_div1 div img {
    margin-bottom: 10px;
    display: block;
    width: 42px;
    height: 42px;
  }
  .main_div2 {
    padding-top: 20px;
    position: relative;
    margin-right: 50px;
  }
  .main_div2 input {
    width: 231px;
    border-radius: 35px;
    height: 50px;
    outline: none;
  }
  .main_div2 img {
    width: 35px;
    height: 36px;
    position: absolute;
    right: 25px;
    bottom: 30px;
  }
  .swiper {
    position: relative;
    top: -10px;
  }
  img {
    width: 100vw;
    height: 435px;
  }
  .swiper-container {
    width: 100;
    margin: 10px auto;
  }
  ::v-deep .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
  }
  .swiper-pagination {
    margin-bottom: 20px;
  }
  .swiper-button-next:hover {
    background-image: url("../../public/zooplay_img/arrRa.png");
  }
  .swiper-button-next {
    background-image: url("../../public/zooplay_img/arrR.png");
    width: 69px;
    height: 69px;
  }
  .swiper-button-next:after {
    opacity: 0;
  }
  .swiper-button-prev:hover {
    background-image: url("../../public/zooplay_img/arrLa.png");
  }
  .swiper-button-prev {
    opacity: 1;
    background-image: url("../../public/zooplay_img/arrL.png");
    width: 69px;
    height: 69px;
  }
  .swiper-button-prev:after {
    opacity: 0;
  }
  .swiper-pagination-bullet {
    display: inline-block;
    width: 300px;
  }
</style>
